<!-- 我的收藏页面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="top_title">我的收藏</div>
        <!-- 日历：选择日期 -->
        <div class="calendar">
          <van-icon name="calendar-o" @click="openCalendar" />
        </div>
      </div>
    </van-sticky>
    <van-search v-model="searchKey" placeholder="请输入搜索关键词" />


    <!-- 时间选择器 -->
    <van-datetime-picker
      v-model="currentDate"
      type="year-month"
      title="选择年月"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatter"
      v-show="timerShow"
      @cancel="closeTimer"
      @confirm="timerConfirm"
    />

    <div class="collect_main">
      <div class="per_year">
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      timerClickCount: 0, // 时间选择器的点击次数
      timerShow: false, // 控制时间选择器的显示
      currentDate: new Date(2021, 0, 17), //当前时间
      minDate: new Date(1970, 0, 1), // 可选择的最小时间
      maxDate: new Date(2025, 0, 1), // 可选择的最大时间
      timerValue: '', // 时间选择器的值
      searchKey: '', // 搜索关键字
    }
  },

  created() {
    // 查询我的收藏列表
    this.getMyCollectionListFunc()
  },

  methods: {
    // 点击打开日历选择
    openCalendar() {
      this.timerClickCount += 1
      if (this.timerClickCount % 2 === 1) {
        this.maxDate = new Date(new Date().getFullYear() + 2, 11, 1) // 获取当前年
        this.timerShow = true
      } else {
        this.timerShow = false
      }
    },

    // 格式化日期选择器的显示
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      }
      if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    // 关闭时间选择器
    closeTimer() {
      this.timerClickCount += 1
      this.timerShow = false
    },

    // 点击确认之后
    timerConfirm(value) {
      // 将下拉菜单值改为全部：0
      this.timerValue = moment(value).format('YYYY-MM-DD').substring(0, 7)
      this.timerClickCount += 1
      this.timerShow = false
      // 查询我的收藏列表
      this.getMyCollectionListFunc()
    },

    // 获取我的收藏列表
    getMyCollectionListFunc() {

    },
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: rgb(86, 82, 82);
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.return_div {
  width: 30px;
  padding-left: 20px;
}
.top_title {
  width: 40%;
  text-align: center;
  margin-left: 3.5em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  font-weight: 600;
  font-size: 16px;
}
.collect_main {
  min-height: 40em;
  background-image: url('https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/bg/bg01.jpg');
}
.calendar {
  font-size: 25px;
  margin-right: 10px;
  margin-bottom: 10px;
  // margin-left: 7.5em;
  // margin-top: 13px;
}
</style>
